<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jquery制作鼠标悬停图片放大镜特效（仿淘宝图片展示）-晨晨日记</title>
		<jsp:include page="/WEB-INF/jsp/common/scriptIncEs.jsp"></jsp:include>
		<script type="text/javascript" src="<c:url value='/js/common/jquery/jquery.imagezoom.min.js'/>"></script>		 
		<style type="text/css">
			html{overflow-y:scroll;}
			body{margin:0; font:12px "\5B8B\4F53",san-serif;background:#ffffff;}
			div,ul,li{padding:0; margin:0;}
			li{list-style-type:none;}
			img{vertical-align:top;border:0;}
			
			/* box */
			.box{width:610px;margin:100px auto;}
			.tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}
			.tb-pic a img{vertical-align:middle;}
			.tb-pic a{*display:block;*font-family:Arial;*line-height:1;}
			.tb-thumb{margin:10px 0 0;overflow:hidden;}
			.tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
			.tb-s310, .tb-s310 a{height:310px;width:310px;}
			.tb-s310, .tb-s310 img{max-height:310px;max-width:310px;}
			.tb-s310 a{*font-size:271px;}
			.tb-s40 a{*font-size:35px;}
			.tb-s40, .tb-s40 a{height:40px;width:40px;}
			.tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;}
			.tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:40px;padding:2px;}
			.tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}
			.tb-thumb li div{border:1px solid #CDCDCD;}
			div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
			div.zoomMask{position:absolute;background:url("../images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}
		</style>
	</head>	
	<body>
		<div class="box">
		
			<div class="tb-booth tb-pic tb-s310">
				<a href="<c:url value='/images/01.jpg'/>"><img src="<c:url value='/images/01_mid.jpg'/>" alt="美女" rel="<c:url value='/images/01.jpg'/>" class="jqzoom" /></a>
			</div>
		
			<ul class="tb-thumb" id="thumblist">
				<li class="tb-selected"><div class="tb-pic tb-s40"><a href="#"><img src="<c:url value='/images/01_small.jpg'/>" mid="<c:url value='/images/01_mid.jpg'/>" big="<c:url value='/images/01.jpg'/>"></a></div></li>
				<li><div class="tb-pic tb-s40"><a href="#"><img src="<c:url value='/images/02_small.jpg'/>" mid="<c:url value='/images/02_mid.jpg'/>" big="<c:url value='/images/02.jpg'/>"></a></div></li>
				<li><div class="tb-pic tb-s40"><a href="#"><img src="<c:url value='/images/03_small.jpg'/>" mid="<c:url value='/images/03_mid.jpg'/>" big="<c:url value='/images/03.jpg'/>"></a></div></li>
				<li><div class="tb-pic tb-s40"><a href="#"><img src="<c:url value='/images/04_small.jpg'/>" mid="<c:url value='/images/04_mid.jpg'/>" big="<c:url value='/images/04.jpg'/>"></a></div></li>
				<li><div class="tb-pic tb-s40"><a href="#"><img src="<c:url value='/images/05_small.jpg'/>" mid="<c:url value='/images/05_mid.jpg'/>" big="<c:url value='/images/05.jpg'/>"></a></div></li>
			</ul>
			
		</div>
	
		<script type="text/javascript">
			$(document).ready(function(){
			
				$(".jqzoom").imagezoom();
				
				$("#thumblist li a").click(function(){
					$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
					$(".jqzoom").attr('src',$(this).find("img").attr("mid"));
					$(".jqzoom").attr('rel',$(this).find("img").attr("big"));
				});
			
			});
		</script>
	 </body>
</html>